<template>
  <a @click="handleChange" type="text" class="refresh-buttonr-a" :class="getTheme()">
    <Icon :type="icon" :size="size" :color="getColor()" /></a>
</template>
<script>
  export default {
    name: 'refreshButton',
    props: {
      collapsed: Boolean,
      icon: {
        type: String,
        default: 'navicon-round'
      },
      size: {
        type: Number,
        default: 26
      },
      theme: {
        type: String,
        default: 'light',
      }
    },
    methods: {
      getTheme() {
        var key = this.theme;
        switch (key) {
          case 'light':
            return 'light'
            break;
          case 'dark':
            return 'dark'
            break;
          default:
            return ''
            break;
        }
      },
      getColor() {
        var key = this.theme;
        switch (key) {
          case 'light':
            return '#5c6b77'
            break;
          case 'dark':
            return '#ffffff'
            break;
          default:
            return ''
            break;
        }
      },
      handleChange() {
        this.$emit('on-refresh')
      }
    }
  }
</script>
<style lang="less">
  @import './refresh-button.less';
</style>